<script setup>
import utils from "./utils.js"
import { ref, computed, defineProps, defineEmits } from "vue";

const { cols, meta, vm } = defineProps(["cols", "meta", "vm"]);
const { name } = meta;

const field_sapn = computed(() => utils.fieldSpan(cols || 4, Number(meta.width || 1)));
const label_span = computed(() => utils.labelSpan(field_sapn.value));
const content_span = computed(() => utils.contentSpan(label_span.value));
</script>
<template>
  <el-col :span="field_sapn">
    <el-row>
      <el-col :span="label_span">
        <el-text class="m-2" tag="b">{{ meta.title }}</el-text>
      </el-col>
      <el-col :span="content_span">
        <slot />
      </el-col>
    </el-row>
  </el-col>
</template>